.component-TreeView {
	overflow: auto;
	scroll-behavior: smooth;
	height: 100%;
	position: relative;
	display: grid;

	& > .part-svg,
	& > .part-node {
		height: 100%;
		width: 100%;
		grid-column: 1;
		grid-row: 1;
	}
}

.component-TreeNodeSvgView {
	.path {
		stroke: gray;
		stroke-dasharray: 1;

		&.childOrThisMarked {
			stroke: orange;
			stroke-width: 5;
			stroke-dasharray: 0;
			stroke-linecap: round;
		}

		&.childOrThisSelected {
			stroke: black;
			stroke-width: 2;
			stroke-dasharray: 0;
		}
	}
}

.component-TreeNodeView {
	font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI,
		HelveticaNeue-Light, Ubuntu, Droid Sans, sans-serif;

	.part-header {
		padding: 2px;
		padding-left: 5px;
		margin: 0;
		display: flex;
		align-items: center;

		.part-collapser {
			width: 10px;
			height: 10px;
			margin-right: 6px;
		}

		.part-text {
			cursor: pointer;
			.part-id {
				color: blue;
			}

			.part-value {
				color: darkgreen;
				text-decoration: underline;

				/*&::before,
				&::after {
					content: '"';
				}*/

				padding: 1px 3px;
				margin-left: 5px;
			}

			.part-emphasized-value {
				color: darkred;
				border: black solid 1px;
				padding: 1px 3px;
				margin-left: 5px;
			}
		}
	}

	.part-children {
		margin-left: 0px;
		margin-top: 0px;

		padding: 5px;
		padding-left: 15px;
	}

	&.selected {
		& > .part-header {
			font-weight: bold;
		}
	}
	&.hovered {
		& > .part-header > span {
			font-weight: bold;
		}
		& > .part-children {
			background: transparentize(gray, 0.8);
		}
	}
}

.component-TreeWithPathView {
	display: flex;
	flex-direction: column;
	height: 100%;

	.part-path {
		overflow: hidden;
		white-space: pre;
		padding: 5px 10px;
		border-bottom: solid gray 1px;

		color: lightgray;

		.part-path-item {
			color: black;
			margin-left: 1px;
			margin-right: 1px;
		}
	}
	.part-tree {
		overflow: auto;
		flex: 1;
	}
}

.decorator-collapse-icon {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23646465' d='M6 4v8l4-4-4-4zm1 2.414L8.586 8 7 9.586V6.414z'/%3E%3C/svg%3E");

	background-position: 50%;
	background-position-x: 50%;
	background-position-y: center;
	background-repeat: no-repeat;

	&.expanded {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23646465' d='M11 10.07H5.344L11 4.414v5.656z'/%3E%3C/svg%3E");
	}
}
